import React from 'react';

import styles from './index.module.less';

/*
* @author JinHang
* @description 轮播图
* @date 2018/10/22 15:55
* @param {}
* @return {}
* */
export default class Carousel extends React.Component {
  state = {
    imgList: [
      {
        key: 1,
        path: require('../../../../asset/images/banner/banner_1.jpg'),
      },
      {
        key: 2,
        path: require('../../../../asset/images/banner/banner_2.jpg'),
      },
      {
        key: 3,
        path: require('../../../../asset/images/banner/banner_3.jpg'),
      },
      {
        key: 4,
        path: require('../../../../asset/images/banner/banner_4.jpg'),
      },
    ],
    currentImg: {},
    dots: [],
  };

  timer = null;

  /*
  * @author JinHang
  * @description 初始化轮播图，
  * @date 2018/10/22 15:56
  * @param {}
  * @return {}
  * */
  componentDidMount() {
    // 先初始化第一张
    this.setState(prevState => {
      const { imgList } = prevState;

      return {
        currentImg: imgList[0],
        dots: [ ...imgList ],
      };
    });

    // 开始轮播
    this.timer = setInterval(() => {
      this.startRun();
    }, 5000);
  }

  /*
  * @author JinHang
  * @description 切割数组
  * @date 2018/10/22 15:57
  * @param {}
  * @return {}
  * */
  startRun = () => {

    this.setState(prevState => {
      const { imgList } = prevState;

      // 取出第一项
      const header = imgList.shift();

      // 压入最后
      imgList.push(header);

      // 修改state
      return {
        imgList,
        currentImg: imgList[0],
      };
    });

  };

  // 卸载组件时清除定时器
  componentWillUnmount() {
    clearInterval(this.timer);
  }

  /*
  * @author JinHang
  * @description 手动选择图片时函数
  * @date 2018/10/22 15:58
  * @param {}
  * @return {}
  * */
  manualSlide = index => {

    this.setState(prevState => {
      const dots = [ ...prevState.dots ];

      // 将从选择图片开始到最后全部切割 [1, 2, 3, 4] => [2, 3, 4]
      const spliceDots = dots.splice(index);

      // 再拼接 [2, 3, 4, 1]
      const imgList = spliceDots.concat(dots);

      return {
        imgList,
        currentImg: imgList[0],
      };
    });

  };

  // 鼠标移入图片选择器时暂停轮播
  onSliderMouseEnter = () => {
    clearInterval(this.timer);
  };

  // 鼠标移出图片选择器时继续轮播
  onSliderMouseLeave = () => {
    this.timer = setInterval(() => {
      this.startRun();
    }, 5000);
  };

  render() {
    const { dots, currentImg } = this.state;

    return (
      <div className={styles.carouselBox + ' ' + styles.clearfix}>
        <div className={styles.imgBox}>
          <img className={styles.imgItem} src={currentImg.path} />
        </div>
        <div className={styles.sliderCtrl}>
          <div
            className={styles.ctrlBox + ' ' + styles.clearfix}
            onMouseEnter={this.onSliderMouseEnter}
            onMouseLeave={this.onSliderMouseLeave}
          >
            {
              dots.map((item, index) => {
                const classStr = styles.sliderItem + (item.key === currentImg.key ? ' ' + styles.active : '');

                return (
                  <div className={classStr} key={item.key} onClick={this.manualSlide.bind(this, index)}></div>
                );
              })
            }
          </div>
        </div>
      </div>
    );
  }
}
